<template>
  <div class="p-10">
    <ul>
      <li class="p-10" v-for="item in ecologys">
        <div class="tile-card">
          <el-image class="logo" :src="item.logo" />
          <h1 class="title">{{ item.title }}</h1>
          <div class="desc">{{ item.desc }}</div>
          <div class="button">
            <el-button type="primary" @click="goWebsite(item.website)">前往官网<ArrowRight /> </el-button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@icon-park/vue-next';

function goWebsite(url) {
  window.open(url, '_blank');
}

const ecologys = [
  {
    title: 'vue',
    desc: '一款流行的前端JavaScript框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。',
    website: 'https://cn.vuejs.org/',
    logo: 'https://cn.vuejs.org/logo.svg'
  },
  {
    title: 'Element Plus',
    desc: '基于 Vue 3，面向设计师和开发者的组件库',
    website: 'https://element-plus.org/zh-CN/',
    logo: 'https://element-plus.org/images/element-plus-logo-small.svg'
  },
  {
    title: 'iconPark',
    desc: '字节跳动官网研发的图标库，包含2600+基础图标，29种图标分类，提供更多的选择',
    website: 'https://iconpark.oceanengine.com',
    logo: 'https://lf1-cdn2-tos.bytegoofy.com/bydesign/iconparksite/logo.svg'
  },
  {
    title: 'Lorem Picsum',
    desc: '免费提供各种随机图片的网站，支持自定义大小滤镜等多种模式',
    website: 'https://picsum.photos/',
    logo: ''
  },
  {
    title: 'echarts',
    desc: '一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表',
    website: 'https://echarts.apache.org/zh/index.html',
    logo: 'https://echarts.apache.org/zh/images/favicon.png'
  },
  {
    title: 'highlightjs',
    desc: '一个轻量级的语法高亮库，用于将代码块或其他文本片段以彩色显示，使其更易于阅读和理解。支持超过180种编程语言和文档格式的语法高亮',
    website: 'https://highlightjs.org/',
    logo: `https://highlightjs.org/icon.png`
  }
];
</script>

<style scoped lang="scss">
ul {
  display: flex;
  flex-wrap: wrap;

  li {
    width: 33.33%;
    min-width: 350px;

    > div {
      padding: 40px;
      box-shadow: var(--admin-shadow);
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }

  .logo {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }

  .title {
    margin: 15px 0 20px;
    text-align: center;
    font-weight: 900;
  }

  .desc {
    flex: 1;
    padding: 0 20px;
    font-size: 13px;
    color: #999999;
    text-align: center;
  }
  .button {
    margin: 20px 0;
    text-align: center;
  }
}
</style>
